<template>
    <ContentBase>
        <div class="content">
            <div style="width: 350px;">
                <div class="content-top">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="dormId" style="font-weight: bold;">寝室号</span>
                        <input type="text" class="form-control" v-model="dormId" placeholder="请输入寝室号">
                    </div>
                    <div class="mb-3" style="display: flex; align-items: center;">
                        <div style="min-width: 60px; font-weight: bold;">楼栋：</div>
                        <select class="form-select" aria-label="Default select example" v-model="building">
                            <option selected>请选择楼栋</option>
                            <option :value="item.name" v-for="item in buildings" :key="item.id">{{ item.name }}</option>
                        </select>
                    </div>
                    <div style="display: flex; align-items: center;" v-if="building != '请选择楼栋'">
                        <div style="min-width: 60px; font-weight: bold;">楼层：</div>
                        <select class="form-select" aria-label="Default select example" v-model="floor">
                            <option selected>请选择楼层</option>
                            <option :value="num" v-for="num in getArray(floor_num)" :key="num">{{ num }}</option>
                        </select>
                    </div>
                </div>
                <div class="content-bottom">
                    <div style="color: red;">{{ error_message }}</div>
                    <button type="button" class="btn btn-outline-primary" @click="clickToSubmit">提交</button>
                </div>
            </div>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '@/components/ContentBase';
import $ from 'jquery';
import { useStore } from 'vuex';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const store = useStore();
const route = useRoute();
const id = route.params.id;
const records = store.state.user.records;
const current_record = ref(null);
const error_message = ref('');
for (let record of records) {
    if (record.id == id) {
        current_record.value = record;
        break;
    }
}

const dormId = ref(current_record.value.dormId);
const building = ref(current_record.value.building);
const floor = ref(current_record.value.floor);
const buildings = ref([]);

const getArray = (n) => {
    return Array(Number(n)).fill(0).map((_, index) => index + 1);  // 返回从 1 到 n 的数组
}

const getBuildingList = () => {
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/get-buildinglist",
        type: "GET",
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                buildings.value = resp.buildings;
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}
getBuildingList();

const floor_num = computed(() => {
    if (building.value !== "请选择楼栋") {
        const buildingData = buildings.value.find(item => item.name === building.value);
        return buildingData ? Number(buildingData.height) : 1; // 确保返回有效数字
    }
    return 1;
})

watch(building, () => {
    floor.value = '请选择楼层';
});

const clearMessage = () => {
    error_message.value = '';
}

const clickToSubmit = () => {
    error_message.value = '';

    $.ajax({
        url: "http://localhost:3000/api/sysadmin/update-dormitory",
        type: "POST",
        data: {
            id: id,
            dormId: dormId.value,
            building: building.value,
            floor: floor.value
        },
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                error_message.value = "提交成功";
                setTimeout(clearMessage, 4000);
            } else {
                error_message.value = resp.error_message;
                setTimeout(clearMessage, 4000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}

</script>

<style scoped>

.content {
    padding: 30px 0;
    display: flex;
    justify-content: center;
}

.content-top {
    margin-bottom: 20px;
}

.content-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

</style>